<div class="container">
  <div class="row">

    <div class="col s12 m8 offset-m1 xl7 offset-xl1">

      <!-- Switches -->
      <div id="switches" class="section scrollspy">
        <p>Switches are special checkboxes used for binary states such as on / off</p>
        <form action="#">
        <p>
            <div class="switch">
            <label>
              Off
              <input checked type="checkbox">
              <span class="lever"></span>
              On
            </label>
          </div>
        </p>

          <p>
            <div class="switch">
              <label>
                Off
                <input disabled type="checkbox">
                <span class="lever"></span>
                On
              </label>
            </div>
          </p>

        <br>
        </form>
        <pre><code class="language-markup">
  &lt;!-- Switch -->
  &lt;div class="switch">
    &lt;label>
      Off
      &lt;input type="checkbox">
      &lt;span class="lever">&lt;/span>
      On
    &lt;/label>
  &lt;/div>

  &lt;!-- Disabled Switch -->
  &lt;div class="switch">
    &lt;label>
      Off
      &lt;input disabled type="checkbox">
      &lt;span class="lever">&lt;/span>
      On
    &lt;/label>
  &lt;/div>
        </code></pre>
      </div>


    </div>
    <div class="col hide-on-small-only m3 xl3 offset-xl1">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIK27J&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#switches">Switches</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
